<template>
    <div class="container mx-auto">
        <div>
            <el-row :gutter="10">
                <el-col :span="5">
                    <div id="neirong">
                        <div class="flex-1 mb-2">
                            <div style=" height: 40px;line-height: 40px;padding-left: 20px;background-color: #1e50ae;">

                                <span style="margin-right: 6vw;">时政要闻</span>

                                <nuxt-link>
                                    <el-button :icon="ElIconArrowRight" circle size="small" />
                                </nuxt-link>
                            </div>
                            <ul>
                                <li v-for="(item, index) in news.slice(0, 6)" :key="index" style="padding-left: 0.5vw;">
                                    <nuxt-link class="flex  content custom-link">
                                        <span class="content flex-1" style="flex:1.2">{{ item.title }}</span>
                                        <span class="flex-1 pl-4">{{ item.time }}</span>
                                    </nuxt-link>
                                </li>
                            </ul>
                        </div>
                        <div class="flex-1 mb-2">
                            <div style=" height: 40px;line-height: 40px;padding-left: 20px;background-color: #1e50ae;">
                                <span>政务服务</span>
                                <!-- <div class="icon"></div> -->
                            </div>
                            <nuxt-link to="https://www.qhzwfw.gov.cn/qhszwfwxns/?city=hyq">
                                <div
                                    style="background-color: #f6f6f6;height: 18px;line-height: 22px;padding: 10px 5px 0 5px;">
                                    <div>
                                        为民、便民、利民为服务宗旨，为人们提供充值话费、公用事业收费、行政事业收费、电子机票、火车票等各类便民服务，具有快捷、方便、安全等。
                                    </div>
                                </div>
                            </nuxt-link>

                        </div>
                    </div>
                </el-col>
                <el-col :span="14">
                    <div id="neirong">
                        <div class="flex-1 mb-2">
                            <h1 class="navTitle">近期热门</h1>
                            <div class="line"></div>
                            <el-row>
                                <el-col :span="9">
                                    <el-carousel trigger="hover" indicator-position="none" class="image-slider2"
                                        autoplay="false">
                                        <el-carousel-item v-for="item in slides" :key="item">
                                            <img :src="item.image" alt="" style="width: 100%;">
                                            <nuxt-link class=" custom-link">
                                                <div class="slide-text2">{{ item.text ? item.text : '' }}</div>
                                            </nuxt-link>

                                        </el-carousel-item>
                                    </el-carousel>
                                </el-col>
                                <el-col :span="15">
                                    <ul class="mt-2">
                                        <li v-for="(item, index) in recentNews.slice(0, 5)" :key="index"
                                            style="padding-left: 0.5vw;">
                                            <nuxt-link class="flex  content custom-link">
                                                <span class="content flex-1.5">{{ item.title }}</span>
                                                <!-- <span class="flex-1">{{ item.time }}</span> -->
                                            </nuxt-link>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-row>
                        </div>
                        <div class="flex-1 mb-2">
                            <el-row class="mt-1" :gutter="10">
                                <el-col :span="12">
                                    <h1 class="navTitle">
                                        <span style="margin-right: 120px;">部门工作</span>
                                        <nuxt-link>
                                            <button style="color:#000000">MORE</button>
                                        </nuxt-link>
                                    </h1>
                                    <div class="line"></div>
                                    <ul>
                                        <li v-for="(item, index) in departmentWork.slice(0, 5)" :key="index"
                                            style="padding-left: 0.5vw;">
                                            <nuxt-link class="flex flex-2 content custom-link">
                                                <span class="content flex-2">{{ item.title }}</span>
                                                <span class="flex-1 pl-3">{{ item.time }}</span>
                                            </nuxt-link>
                                        </li>
                                    </ul>
                                </el-col>

                                <el-col :span="12">
                                    <h1 class="navTitle">
                                        <span style="margin-right: 120px;">乡镇动态</span>
                                        <nuxt-link>
                                            <button style="color:#000000">MORE</button>
                                        </nuxt-link>
                                    </h1>
                                    <div class="line"></div>
                                    <ul>
                                        <li v-for="(item, index) in townshipNews.slice(0, 5)" :key="index"
                                            style="padding-left: 0.5vw;">
                                            <nuxt-link class="flex flex-2 content custom-link">
                                                <span class="content flex-2">{{ item.title }}</span>
                                                <span class="flex-1">{{ item.time }}</span>
                                            </nuxt-link>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-row>
                        </div>
                        <!-- <div class="flex-1 mb-2">
                            <el-row class="mt-1" :gutter="10">
                                <el-col :span="12">
                                    <h1 class="navTitle">
                                        <span style="margin-right: 120px;">部门工作</span>
                                        <nuxt-link>
                                            <span style="color:#000000">MORE</span>
                                        </nuxt-link>
                                    </h1>
                                    <div class="line"></div>
                                    <ul>
                                        <li v-for="(item, index) in departmentWork.slice(0,5)" :key="index"
                                            style="padding-left: 0.5vw;">
                                            <nuxt-link class="flex flex-2 content custom-link">
                                                <span class="content flex-2">{{ item.title }}</span>
                                                <span class="flex-1 pl-3">{{ item.time }}</span>
                                            </nuxt-link>
                                        </li>
                                    </ul>
                                </el-col>

                                <el-col :span="12">
                                    <h1 class="navTitle">
                                        <span style="margin-right: 120px;">乡镇动态</span>
                                        <nuxt-link>
                                            <span style="color:#000000">MORE</span>
                                        </nuxt-link>
                                    </h1>
                                    <div class="line"></div>
                                    <ul>
                                        <li v-for="(item, index) in townshipNews.slice(0,5)" :key="index"
                                            style="padding-left: 0.5vw;">
                                            <nuxt-link class="flex flex-2 content custom-link">
                                                <span class="content flex-2">{{ item.title }}</span>
                                                <span class="flex-1">{{ item.time }}</span>
                                            </nuxt-link>
                                        </li>
                                    </ul>
                                </el-col>
                            </el-row>
                        </div> -->
                    </div>
                </el-col>
                <el-col :span="5">
                    <span class="navTitle mb-2">精彩图片</span>
                    <div class="line"></div>
                    <ul class="mx-auto">
                        <li v-for="(item, index) in pic" :key="index">
                            <img :src="item.src" style="height: 100%;" class="my-2">
                            <div style="text-align: center;width: 150px;">{{ item.title }}</div>
                        </li>
                    </ul>
                </el-col>
            </el-row>
        </div>
        <div>
            <h1 class="navTitle">乡村风情</h1>
            <div class="line"></div>
            <CustomSwiper :slides="slides"></CustomSwiper>
        </div>
    </div>
</template>

<script setup>

const news = ref(
    [
        {
            title: '习近平总书记关切事｜擦亮高原蓝宝石——青海湖保护纪事',
            time: '2024-06-08'
        },
        {
            title: '湟源县开展高考保障监督检查工作',
            time: '2024-06-05'
        },
        {
            title: '湟源县各学校形式多样庆祝“六一”国际儿童',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },
        {
            title: '湟源县召开十七届县委第84次常委会会议',
            time: '2024-06-03'
        },

    ])
const recentNews = ref(
    [
        {
            title: '关爱赋能助成长 携手同行向未来',
            time: '2016-10-09'
        },
        {
            title: '发挥政协优势 助推未诉先办',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
        {
            title: '西宁首家未成年人社会支持体系实践基地在湟源建立',
            time: '2016-10-09'
        },
    ])
const townshipNews = ref(
    [
        {
            title: '【和平乡】打造“党建微网格15分钟服务圈” 实现服务群众“零距离”',
            time: '2024-05-30'
        },
        {
            title: '【东峡乡】法律宣传精彩纷呈点亮群众美好生活',
            time: '2024-05-30'
        },
        {
            title: '【大华镇】驻村干部办实事 爱心助残解民忧',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
        {
            title: '【寺寨乡】惠民政策进村庄 服务群众“零距离”',
            time: '2024-05-29'
        },
    ])
const departmentWork = ref(
    [
        {
            title: '【县检察院】“三抓三促”提升机关党建实效',
            time: '2024-05-30'
        },
        {
            title: '【县公安局】刑侦大队联合城关中心派出所开展防范电信网络诈骗进校园宣传活动',
            time: '2024-05-28'
        },
        {
            title: '【县民政局】反邪不停歇 聚力筑平安',
            time: '2024-05-27'
        },
        {
            title: '【县公安局】打好“三战”筑牢 安全生产防线',
            time: '2024-05-23'
        },
        {
            title: '【县检察院】“四抓四促”提升机关党建实效',
            time: '2024-05-21'
        },


    ]
)
const slides = ref([
    { image: '/assets/images/huangshan.png', text: '纪念“黄山谈话”30周年系列活动' },
    { image: '/assets/images/huangshan2.png', text: '纪念“黄山谈话”30周年系列活动' },
    { image: '/assets/images/glg.png', text: 'GLG农产品深加工高科产业园首批设备运抵' },
    { image: '/assets/images/huaibei2.png', text: '淮北参观学习' },
    { image: '/assets/images/glg2.png', text: 'GLG农产品深加工高科产业园首批设备运抵' },
    { image: '/assets/images/leader.png', text: '全国工商联、农业部、安徽省工商联领导' },
    { image: '/assets/images/huaibei3.png', text: '淮北参观学习' },
    { image: '/assets/images/huaibei4.png', text: '淮北参观学习' },
]);
const swiper = ref([
    {
        src: '/assets/images/swiper1.png',
        title: '湟源县开展高考保障监督检查工作'
    },
    {
        src: '/assets/images/swiper2.png',
        title: '湟源县各学校形式多样庆祝“六一”国际儿童'
    },
    {
        src: '/assets/images/swiper3.png',
        title: '关爱赋能助成长 携手同行向未来'
    },
    {
        src: '/assets/images/swiper4.png',
        title: '发挥政协优势 助推未诉先办'
    },
])
const pic = ref([
    {
        src: '/assets/images/huaibei.png',
        title: '纪念“黄山谈话”30周年系列活动'
    },
    {
        src: '/assets/images/huangshan.png',
        title: '淮北参观学习'
    },
])
</script>

<style scoped lang="scss">
.image-slider2 {
    width: 100%;
    max-width: 220px;
    height: 190px;
    // margin: 0 auto;
    margin-left: 16px;
    margin-bottom: 10px;
    margin-top: 10px;
    /* margin-left: 5vw; */
    position: relative;
}

.slide2 {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.slide-image2 {
    width: 100%;
    height: auto;
    display: block;
}

.slide-text2 {
    margin-top: 10px;
    font-size: 11px;
    text-align: center;
}

.container {
    display: flex;
    flex-direction: column;
    margin-top: 1vh;
    width: 65vw;

    .el-col {
        display: flex;
        flex-direction: column;

        #neirong {
            p {
                height: 4vh;
                line-height: 4vh;
                padding-left: 2vw;
                background-color: #1e50ae;
            }

            ul {
                li {
                    height: 4vh;
                    line-height: 4vh;
                    padding-left: 2vw;
                    background-color: #f6f6f6;
                    border-bottom: 1px dashed #d9d9d9;
                    display: flex;
                }
            }
        }
    }

    .swipers {
        border-bottom: 1px solid #cccccc;
        height: 4vh;
        margin-bottom: 2vh;
        width: 65vw;
    }
}
</style>